import React, { useImperativeHandle,forwardRef, useState } from 'react';
import {
  
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerHeader,
  DrawerOverlay,
  Flex,
  useDisclosure,
  IconButton, 
  Button,
  TabPanel,
  TabPanels,
  Tabs,
  ChakraProps,
  Box
} from "@chakra-ui/react"
import { reportData } from "../types/data";
import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from '@chakra-ui/icons'

import ReportBox from './reportBox'
const reportStyle:ChakraProps = {
  height: "60vh",
  width: "100%",
  bg:"#fff"
}
interface Props{
  aiInfo:reportData|null,
  paintimg?:string
}
const AiModal = forwardRef(({aiInfo,paintimg}:Props,ref)=> {
  // if(!aiInfo)return (<></>)
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [ tabIndex, setTabIndex ] = useState(1)
  function switchTab(num:-1|1){
    let newIndex = tabIndex+num;
    let tabNum = aiInfo?.data.length || 0;
    if(newIndex>= tabNum)newIndex=0;
    if(newIndex<0)newIndex=tabNum;  
    setTabIndex(newIndex)
  }
  const handleTabsChange = (index:number) => {
    setTabIndex(index)
  }
  useImperativeHandle(ref, () => ({
    onOpen
  }));

  return (
    <Drawer placement="bottom" size="xl" onClose={onClose} isOpen={isOpen}>
    <DrawerOverlay />
    <DrawerContent>
      <Flex justifyContent="space-between" alignItems="flex-start" py={2} px={3}>
        <IconButton variant="outline" isRound={true} onClick={()=>switchTab(-1)} aria-label="" icon={<ChevronLeftIcon/>}></IconButton>
        <Button variant="link" size="xs" onClick={()=>onClose()}><ChevronDownIcon/>收起</Button>
        <IconButton variant="outline" aria-label="" onClick={()=>switchTab(1)} isRound={true} icon={<ChevronRightIcon/>}></IconButton>
      </Flex>
      <DrawerBody px={4}>
        <Box {...reportStyle}>
          <Tabs  index={tabIndex} onChange={handleTabsChange}>
            <TabPanels>
              {aiInfo?.data.map((el,index)=>{
                return <TabPanel px={1} key={index}>
                  <ReportBox paintimg={paintimg} data={el} ></ReportBox>
                </TabPanel>
              })}
            </TabPanels>

          </Tabs>
        </Box>
      </DrawerBody>
    </DrawerContent>
  </Drawer>

);
})

export default AiModal;
